<template>
  <div class="userlogin">
    <Header>登录</Header>
    <section>
        <div class="login-tel">
          <input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*">
        </div>
        <div class="login-password" >
          <input type="password" v-model="userPwd" placeholder="请输入密码" pattern="[0-9]*">
        </div>
       
        <div class="login-btn" @click="login">登 录</div>
        <div class="tab">
          <div @click="goLogin">
            <i class="iconfont">&#xe647;</i>
            <span>短信登录</span>
          </div>
          <div @click="goRecovery">
            <i class="iconfont">&#xe671;</i>
            <span>找回密码</span>
          </div>
          <div @click="goRegister">
            <i class="iconfont">&#xe600;</i>
            <span>快速注册</span>
          </div>
          
        </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script> 
import Header from '@/components/login/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
//引入弹窗组件
import { Toast } from 'mint-ui';
//引入axios的二次封装
import http from '@/common/api/request.js'
//引入vuex的mapMutations来传递值给my界面
import { mapMutations } from 'vuex';

export default {
    name:'UserLogin',
    components:{
        Header,
        Tabbar
    },
    methods:{
      //vuex调用方法
      ...mapMutations(['userLogin']),

      //跳转登陆界面
        goLogin(){
            this.$router.push({
                path:'/login'
            })
        },
        //跳转注册界面
        goRegister(){
          this.$router.push({
            path:'/register'
          })
        },
        //跳转找回密码界面
        goRecovery(){
          this.$router.push({
            path:'/recovery'
          })
        },
        //点击登录
        login(){
          //前端验证
          if(!this.validate('userTel')) return
          if(!this.validate('userPwd')) return
          //发送请求
          http.$axios({
            url:'/api/login',
            method:'POST',
            data:{
              userTel:this.userTel,
              userPwd:this.userPwd
            }
          }).then(res=>{
            console.log(res.data)
            //提示信息
            Toast(res.msg)
            //登陆失败
            if(!res.success) return
            //登录成功
            //调用vuex的mutation成功后给user——login传递用户的信息
            this.userLogin(res.data)
            this.$router.push({
                path:'/my',
              })
          })
          //后端验证
        },
        //验证方法
        validate(key){
          let bool = true
          if(!this.rules[key].rule.test(this[key])){
            //提示信息
            Toast(this.rules[key].msg);
            bool = false
            return false
          }
          return bool
        }
    },
    data(){
      return{
        userTel:'',//用户输入的手机号
        userPwd:'',//用户输入的密码
        //验证规则
        rules:{
          //手机号验证
          userTel:{
            rule:/^1\d{10}$/,
            msg:'手机号不能为空,且是11位数字'
          },
          //密码验证
          userPwd:{
            rule:/\w{6,12}$/,
            msg:'密码不能为空,应为6~12位'
          }
        }
      }
    },
    
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: (20 / @rootsize) 0;
  font-size: (14 / @rootsize);
  input{
    line-height: (44 / @rootsize);
    height: ( 44 / @rootsize);
    background-color: #fff;
    padding: 0 (20 / @rootsize);
  }
  .login-tel{
    padding: (15 / @rootsize) 0;
    width: (335 / @rootsize);
    input{
      width: 100%;
      border: 1px solid #ccc;
    }
  }
  .login-password{
    display: flex;
    align-items: center;
    margin: (15 / @rootsize) 0;
    width: (335 / @rootsize);
    border: 1px solid #ccc;
    input{
      flex: 1;
      border-right: 1px solid #ccc;
    }
    i{
      position: absolute;
      right: 0;
      font-size: (20 / @rootsize);
    }
  }
  .login-btn{
    width: (335 / @rootsize);
    line-height: (44 / @rootsize);
    color: #fff;
    background-color: #b0352f;
    border-radius: 5px;
    text-align: center;
    font-size: (18 / @rootsize);
  }
  .tab{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: (10 / @rootsize);
    width: (335 / @rootsize);
    height: (44 / @rootsize);
    line-height: (44 / @rootsize);
      div{
        display: flex;
        align-items: center;
        height: (44 / @rootsize);
      }
        i{
          margin-right: (3 / @rootsize);
          font-size: (16 / @rootsize);
          color: #3c3c3c;
        }
        span{
          font-size: (13 / @rootsize);
        }
     
  }
}
//背景颜色
section::before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  z-index: -1;
}
</style>